var ul = document.querySelector("ul"),
	left_arrow  = document.querySelector(".left_arrow"),
	right_arrow = document.querySelector(".right_arrow"),
	point_list = document.querySelectorAll("ol li"),
	now_index = 0,
	carousel = document.querySelector(".carousel_box");
	
	right_arrow.addEventListener("click", function(){
		
		point_list[now_index].classList.remove("active");
		
		if(++now_index == point_list.length){
			now_index = 0;
		}
			ul.style.transform = `translateX(-${now_index}00%)`;
		point_list[now_index].classList.add("active");
		
	})
	
	left_arrow.addEventListener("click", function(){
		
		point_list[now_index].classList.remove("active");
		
		if(--now_index == -1){
			now_index = point_list.length -1;
		}
		
		ul.style.transform = `translateX(-${now_index}00%)`;
		point_list[now_index].classList.add("active");
		
	})
	

var time = setInterval(function(){
	point_list[now_index].classList.remove("active");
	
	if(++now_index == point_list.length){
		now_index = 0;
	}
		ul.style.transform = `translateX(-${now_index}00%)`;
	point_list[now_index].classList.add("active");
}, 1000)

carousel.addEventListener("mouseover", function(){
	clearInterval(time);
})
carousel.addEventListener("mouseleave", function(){
	time = setInterval(function(){
		point_list[now_index].classList.remove("active");
		
		if(++now_index == point_list.length){
			now_index = 0;
		}
			ul.style.transform = `translateX(-${now_index}00%)`;
		point_list[now_index].classList.add("active");
	}, 1000)
})

point_list.forEach(function(obj, index){
	obj.addEventListener("click", function(){
		point_list[now_index].classList.remove("active");
		point_list[index].classList.add("active");
		ul.style.transform = `translateX(-${index}00%)`;
		now_index = index;
	})
})
